<template>
    <Dropdown transfer-class-name="dropbutton-body" trigger="custom" :transfer="true" :visible="value" @on-visible-change="onVisibleChanged">
        <slot name="button" @click="onToggle"></slot>
        <slot name="body" slot="list"></slot>
    </Dropdown>
</template>

<style>
.dropbutton-body {
    z-index: 2500;
    overflow: visible;
}
</style>


<script lang="ts">
// doc: https://github.com/kaorun343/vue-property-decorator
import { Component, Provide, Prop, Watch, Vue } from 'vue-property-decorator';

@Component({components:{  }})
export default class DropButton extends Vue {

    value = false

    mounted () {
        $(document.body).mousedown((e: any)=>{
            if(!this.value)
                return
            if( !$(e.target).parents(".dropbutton-body").size() && !$(e.target).hasClass("dropbutton-body") 
                 &&  !$(e.target).parents(".dropbutton-button").size() && !$(e.target).hasClass("dropbutton-button") 
            ) {
                this.value = false
            }
        })

        if(this.$slots.button) {
            for(let btn of this.$slots.button){
                $(btn.elm)
                    .addClass("dropbutton-button")
                    .click(()=>{
                        this.value = !this.value
                    })
            }
        }
    }

    @Watch("value")
    onValueChanged() {
        this.$emit('input', this.value)
    }

    onToggle() {
        console.log("onToggle")
        this.value = !this.value
    }

    onVisibleChanged(visible: boolean) {
        if(visible) {
            setTimeout(()=>{
                if(this.$slots.body) {
                    for(let body of this.$slots.body){
                        $(body.elm).css({
                            "z-index": "2500" ,
                            "overflow" : "visible"
                        })
                    }
                }
            }, 0)
        }
    }
}
</script>